<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            width: 660px;
            height: 300px;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            margin: 0px auto;
        }
        .box section {
            box-sizing: border-box;
            text-align: center;
            width: 110px;
            background-color: khaki;
            color: white;
            text-shadow: 1px 1px red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <section id="year"></section>
        <section id="month"></section>
        <section id="date"></section>
        <section id="hour"></section>
        <section id="minute"></section>
        <section id="second"></section>
    </div>
    <script>
        function timeOut (){
            var time = new Date();              //如果Date（）不写时间，就是获取本地时间，如果写了就是获取我们写入的时间
            var year = time.getFullYear();      //获取这个时间的年份
            var month = time.getMonth() + 1 ;        //获取这个时间的月份，但是是从0-11，所以打印时需要加一操作
            var date = time.getDate();          //获取这个时间的日期
            var hours = time.getHours();        //获取这个时间的小时
            var minutes = time.getMinutes();    //获取这个时间的分钟
            var seconds = time.getSeconds();    //获取这个时间的秒钟
            var arr = [ year , month , date , hours , minutes , seconds ] ;  
            return arr ;
        }
        function ReplaceStr( a ) {
            var replaceArr = ["零","一","二","三","四","五","六","七","八","九"] ; 
            return replaceArr[parseInt(a)] ; 
        }
        function splitArr ( arg ) {
            var str = '' ;
            if ( arg < 10 ) {
                str = ReplaceStr( arg.toString()[0] ) ;
            } else if ( arg == 10 ) {
                str = '十' ; 
            } else if ( arg > 10 && arg < 20 ) {
                str = "十" + ReplaceStr( arg.toString()[1] ) ;
            } else if ( arg % 10 == 0 && arg / 10 > 1 ){ 
                str =  ReplaceStr( arg.toString()[0] ) + "十" ; 
            } else if ( arg % 10 != 0 && arg / 10 > 2 ) {
                str =  ReplaceStr( arg.toString()[0] ) + "十" +ReplaceStr( arg.toString()[1] ) ;
            }
            return str ;
        }
        function rePlay() {
            var year = timeOut()[0].toString();
            var yearStr = '';
            for ( var i = 0 ; i < year.length ; i ++ ){
                yearStr = yearStr + ReplaceStr(year[i]) ; 
            }
            var monthStr = splitArr(parseInt( timeOut()[1] ));
            var dateStr = splitArr(parseInt( timeOut()[2] ));
            var hoursStr = splitArr(parseInt( timeOut()[3] ));
            var minutesStr = splitArr(parseInt( timeOut()[4] ));
            var secondsStr = splitArr(parseInt( timeOut()[5] ));
            return [yearStr+"年",monthStr+"月",dateStr+"日",hoursStr+"时",minutesStr+"分",secondsStr+"秒"] ;   
        }
        var yearE = document.getElementById("year");
        var monthE = document.getElementById("month");
        var dateE = document.getElementById("date");
        var hourE = document.getElementById("hour");
        var minuteE = document.getElementById("minute");
        var secondE = document.getElementById("second");
            yearE.innerHTML = rePlay()[0] ;
            monthE.innerHTML = rePlay()[1] ; 
            dateE.innerHTML = rePlay()[2] ; 
            hourE.innerHTML = rePlay()[3] ; 
            minuteE.innerHTML = rePlay()[4] ; 
            secondE.innerHTML = rePlay()[5] ; 
        setInterval( function (){
            yearE.innerHTML = rePlay()[0] ;
            monthE.innerHTML = rePlay()[1] ; 
            dateE.innerHTML = rePlay()[2] ; 
            hourE.innerHTML = rePlay()[3] ; 
            minuteE.innerHTML = rePlay()[4] ; 
            secondE.innerHTML = rePlay()[5] ; 
        } , 1000 ) ;
    </script>
</body>
</html>